webpack - css压缩

optimize-css-assets-webpack-plugin 单独压缩css文件

安装

npm install optimize-css-assets-webpack-plugin@^5.0.3 -D

普通压缩

直接在webpack.config.js中引入插件，并且配置即可。

// 单独压缩css文件
const OptimizeCssAssetsWebpackPlugin = require('optimize-css-assets-webpack-plugin')

  // 插件
  plugins: [
    new OptimizeCssAssetsWebpackPlugin(),
  ],

重新构建项目，可以看到dist/css/bundle.css文件内容被压缩成了一行。

使用cssnano配置规则压缩

需要安装

npm install cssnano -D

    // 使用cssnano配置规则压缩
    new OptimizeCssAssetsWebpackPlugin({
      cssProcessor: require('cssnano'), //引入cssnano配置压缩选项
      cssProcessorOptions: {
        discardComments: {
          removeAll: true
        }
      },
      canPrint: true //是否将插件信息打印到控制台
    })

重新构建项目，即可。

注意：此插件压缩的对象是由mini-css-extract-plugin插件输出的css文件,而不是css源文件

相关参数：

本章结束！